<template>
  <div class="app">
    <Head :name="name"></Head>
    <van-search
  v-model="value"
  shape="round"
  placeholder="查询菜品"
  @keydown.enter="search"
/>
<Swipe :list="bannerList"></Swipe>
<p class="title">美食片刻即达</p>
<div class="theme">
  <div v-for="item in themelist" :key="item.id" class="img" @click="detail({id:item.id})">
  <img :src="'http://124.93.196.45:10001/'+item.imgUrl" alt="" >
  <div>{{item.themeName}}</div>
  </div>
</div>
<!-- 附近美食 -->
<div class="near" style="padding:10px">
  <div style="display:flex;flex-direction:column;width: 50%;"><p style="font-size:22px;margin-bottom:5px">附近美食</p>
  <div style="border-radius:10px;overflow:hidden;width: 170px;margin-bottom:5px"><img :src="'http://124.93.196.45:10001/'+nearlist[6].imgUrl" alt="" style="width:100%"></div>
  <div style="border-radius:10px;overflow:hidden;width: 170px;"><img :src="'http://124.93.196.45:10001/'+nearlist[10].imgUrl" alt="" style="width:100%"></div>
  
  </div>

  <div v-for="(item) in nearlist" :key="item.id" class="near-block" @click="to({id:item.id,themeId:item.themeId})">
<div class="img"><img :src="'http://124.93.196.45:10001/'+item.imgUrl" alt="" ></div>
<div>{{item.name}}</div>
<div style="margin: 8px 0;font-size: 16px;color: #999;"><van-rate v-model="item.score" size="14px" allow-half=true /><span style="color:red;font-size: 16px;margin-left: 3px;">{{item.score}}</span></div>
<div style="font-size: 16px;color: #999;">人均消费:<span style="color:red"><span style="font-size:16px;margin-right: -7px;">￥</span> {{item.avgCost}}</span> </div>

  </div>
</div>
  </div>
</template>

<script>
import  Head  from "./takeView/headView.vue"
import  Swipe  from "./takeView/swiperView.vue"
import { swiperlist, theme, near } from "./service"
import mixin from "../../mixin/flag"
export default {
  mixins:[mixin],
  data(){
return{
name:'外卖订餐',
value:'',
bannerList:[],
themelist:[],
nearlist:[],
}
  },
components:{
  Head,
  Swipe,
},
methods:{
  detail(id){
    this.$router.push({path:'/searchList',query:id})
  },
  to(ide){
    this.$router.push({path:'/restaurantDetail',query:ide})
  },
async search(){
  // let res = await searchlist({keyword:this.value})
  this.$router.push({path:'/searchList',query:{keyword:this.value}})
  // console.log(res);
}
},
async created(){
  let res = await swiperlist()
  this.bannerList=res.data.rows
  let res2 = await theme()
  this.themelist=res2.data.data
  console.log(res2);
  let res3 =await near()
  this.$nextTick(()=>{
    this.nearlist =res3.data.rows
  console.log(res3);
  })
}
}
</script>

<style lang="scss" scoped>
.app{
background-color: rgb(245, 241, 241);

.title{
  margin-top: 5px;
  font-size: 16px;
}
.theme{
  background-color: white;
  margin-top: 10px;
  height: 90px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 18px;
  padding:1px 2px;
  border-bottom: 1px solid rgb(209, 207, 207);
  .img{
    margin-top: 10px;
    text-align: center;
    img{
    width: 40px;
  }
  }
  
}
.near{
  background-color:white;
  margin: 10px auto;
    width:95%;
    display: flex;
    flex-wrap: wrap;
    // float: left;
  //  flex: 1;
    .near-block{
      // display: inline;
      margin: 3px;
      width: 48%;
      // overflow: hidden;
      align-items: baseline;
      font-size: 18px;
      img{
        width: 100%;
        
        
      }
    }
  }
}
</style>